<style lang="less">
  .f-w70{
    width: 70% !important;
  }
  .label_title {
    padding: 16px 14px 0 16px;
  }
  .label_txt {
    font-size: 18px;
    color: black;
  }
  .f-me {
    margin-bottom: 10px;
  }
  .f-el-sy{
    text-align: center;
    line-height: 45px;
    border: 1px solid #c8c8c8;
    margin-right: 15px;
  }
</style>
<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="grid-content">
          <label><b>| 综合统计</b></label>
          <el-row>
            <el-col :span="4" class="f-el-sy f-mt10">
              好评度：<label v-html="this.totalInfo.haoping"></label>%
            </el-col>
            <el-col :span="4" class="f-el-sy f-mt10">
              中评度：<label v-html="this.totalInfo.zhongping"></label>%
            </el-col>
            <el-col :span="4" class="f-el-sy f-mt10">
              差评度：<label v-html="this.totalInfo.chaping"></label>%
            </el-col>
            <el-col :span="4" class="f-el-sy f-mt10">
              综合评分：<label v-html="this.totalInfo.overallRating"></label>
            </el-col>
            <el-col :span="4" class="f-el-sy f-mt10">
              评价次数：<label v-html="this.totalInfo.total"></label>
            </el-col>
            <el-col :span="4">
              <div class="grid-content">
              </div>
            </el-col>
          </el-row>
        </div>
        <br>
        <div class="grid-content">
          <label><b>| 各项评分指标平均分值</b></label>
          <el-row class="f-mt10">
            <el-col :span="6">
              运输时效：<label v-html="this.totalInfo.transportTime"></label>
            </el-col>
            <el-col :span="6">
              运输价格：<label v-html="this.totalInfo.transportPrice"></label>
            </el-col>
            <el-col :span="6">
              客服态度：<label v-html="this.totalInfo.customerServiceAttitude"></label>
            </el-col>
            <el-col :span="6">
              货物保证：<label v-html="this.totalInfo.cargoSecurity"></label>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content">
            <div class="label_title"><span class="label_txt">| 综合评价趋势图</span>
              <el-radio-group v-model="orderEvaluationType" style="float: right">
                <el-radio-button label="SEVEN_DAYS">7日</el-radio-button>
                <el-radio-button label="FIFTEEN_DAYS">15日</el-radio-button>
                <el-radio-button label="MONTH">月</el-radio-button>
                <el-radio-button label="SIX_MONTHS">半年</el-radio-button>
              </el-radio-group>
            </div>
            <div id="a1" style="height: 200px;width: 800px;"></div>
        </div>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="8"><div class="grid-content">
        评价时间 ：
        <el-date-picker class="f-w70"
                        v-model="searchDate"
                        type="daterange"
                        placeholder="选择日期">
        </el-date-picker>
      </div></el-col>
      <el-col :span="8"><div class="grid-content">&nbsp;&nbsp;&nbsp;整体评价 ：
        <el-select class="f-w70"  v-model="searchForm.overallEvaluation"
                   placeholder="请选择">
          <el-option
            v-for="item in $store.getters.ORDER_OVERALL_EVALUATION"
            :key="item.dictVal"
            :label="item.cnDictValname"
            :value="item.dictVal">
          </el-option>
        </el-select>
      </div></el-col>
      <el-col :span="8"><div class="grid-content">订单编号 ：
        <el-input class="f-w70" v-model="searchForm.orderNumber" placeholder="请输入订单编号"></el-input>
      </div></el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="8">
        <div class="grid-content">
        客户名称 ：
        <el-select
          v-model="searchForm.memberUserId"
          remote
          :remote-method="searchMemberUsers"
          filterable
          placeholder="请选择客户" class="f-w70">
          <el-option v-for="(mu,index) in memberUsers"
                     :label="mu.realName"
                     :value-key="mu.userId"
                     :value="mu.userId" :key="index">
          </el-option>
        </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">发货人手机 ：
          <el-input class="f-w70" v-model="searchForm.shipmentsContactPhone" placeholder="请输入发货人手机"></el-input>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <el-checkbox v-model="searchForm.checked">只显示有评语的评价</el-checkbox>
        </div>
      </el-col>
    </el-row>

    <br>
    <div class="f-mt f-wa ">
      <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20 f-me" @click="reset()">重置</el-button>
      <el-button type="primary" class="f-wa f-fr f-ml10 f-me"  @click="searchFormClick()">查询</el-button>
    </div>
    <el-table :data="evaluationData" border style="width: 100%">
      <el-table-column prop="evaluationTime" label="评价时间"  style="width: 9%;"></el-table-column>
      <el-table-column prop="overallEvaluation" label="整体评价"  style="width: 5%;" >
        <template slot-scope="scope">
          <label v-if="scope.row.overallEvaluation === 101021001">
            好评
          </label>
          <label v-if="scope.row.overallEvaluation === 101021002">
            中评
          </label>
          <label v-if="scope.row.overallEvaluation === 101021003">
            差评
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="overallRating" label="综合评分" width="70" ></el-table-column>
      <el-table-column prop="transportTime" label="运输时效"  width="70" ></el-table-column>
      <el-table-column prop="transportPrice" label="运输价格"  width="70"  ></el-table-column>
      <el-table-column prop="customerServiceAttitude" label="客服态度"  width="70"  ></el-table-column>
      <el-table-column prop="cargoSecurity" label="货物保障"  width="70"  ></el-table-column>
      <el-table-column prop="evaluationDescription" label="评价内容" style="width: 10%;" ></el-table-column>
      <el-table-column prop="memberUserName" label="客户名称" style="width: 10%;" ></el-table-column>
      <el-table-column prop="orderApp.orderNumber" label="订单编号" width="200" >
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
             @click="orderSelectDialog(scope.row.orderApp)">
            {{scope.row.orderApp.orderNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="orderApp.agingName" label="运输方式" style="width: 10%;" ></el-table-column>
      <el-table-column prop="orderApp.paymentTypeName" label="结算方式" style="width: 10%;" ></el-table-column>
      <el-table-column prop="shipInfo" label="发货信息" width="200px" >
        <template slot-scope="scope">
          <label v-if="scope.row.shipInfo !== null || scope.row.shipInfo !== '' || scope.row.shipInfo !== undefined">
            {{scope.row.shipInfo}}<br>
          </label>
          <label v-if="scope.row.shipAddress !== null || scope.row.shipAddress !== '' || scope.row.shipAddress !== undefined">
            {{scope.row.shipAddress}}<br>
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="receiptInfo" label="收货信息" width="200px" >
        <template slot-scope="scope">
          <label v-if="scope.row.receiptInfo !== null || scope.row.receiptInfo !== '' || scope.row.receiptInfo !== undefined">
            {{scope.row.receiptInfo}}<br>
          </label>
          <label v-if="scope.row.receiptAddress !== null || scope.row.receiptAddress !== '' || scope.row.receiptAddress !== undefined">
            {{scope.row.receiptAddress}}<br>
          </label>
        </template>
      </el-table-column>
      <el-table-column label="货物信息" style="width: 20%;" >
        <template slot-scope="scope">
          <label v-if="scope.row.orderApp.cargoNames !== null || scope.row.orderApp.cargoNames !== '' || scope.row.orderApp.cargoNames !== undefined">
            {{scope.row.orderApp.cargoNames}}<br>
          </label>
          <label v-if="scope.row.orderApp.amount !== null || scope.row.orderApp.amount !== '' || scope.row.orderApp.amount !== undefined">
            {{scope.row.orderApp.amount}}件<br>
          </label>
          <label v-if="scope.row.orderApp.weight !== null || scope.row.orderApp.weight !== '' || scope.row.orderApp.weight !== undefined">
            {{scope.row.orderApp.weight}}吨<br>
          </label>
          <label v-if="scope.row.orderApp.volume !== null || scope.row.orderApp.volume !== '' || scope.row.orderApp.volume !== undefined">
            {{scope.row.orderApp.volume}}方<br>
          </label>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="f-mt10"
                   :current-page="currentPage"
                   :page-size="pageSize"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total,sizes,prev, pager, next, jumper"
                   :total="total" style="float: right">
    </el-pagination>

    <!--订单查看Dialog-->
    <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
      <order-select :title="orderSelectForm"></order-select>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderEvaluationManages,
  getTotalInfo,
  overallRatingStatistics
} from '../../api/order/OrderEvaluation';
import {
  resetObjNull,
  isEmpty
} from '../../lib/util';
import OrderSelect from './OrderSelectDialog.vue';
import { getMemberUsers } from '../../api/customer/maintain.js';
import echarts from 'echarts';

export default {
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      token: this.$store.state.token,
      orderEvaluationType: 'SEVEN_DAYS',
      chart: {
        overallRatingStatisticsChart: null
      },
      memberUsers: [],
      orderSelect: false,
      orderSelectForm: {},
      searchDate: [],
      totalInfo: {
        transportTime: '',
        transportPrice: '',
        customerServiceAttitude: '',
        cargoSecurity: '',
        overallRating: '',
        total: '',
        haoping: '',
        zhongping: '',
        chaping: ''
      },
      searchForm: {
        overallEvaluation: '',
        orderNumber: '',
        memberUserId: '',
        shipmentsContactPhone: '',
        checked: ''
      },
      evaluationData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      param: {
        filters: '',
        sorts: '',
        size: 15,
        page: 1
      },
      overallRatingStatistics: {
        x: [],
        y: []
      }
    };
  },
  watch: {
    orderEvaluationType (type) {
      this.overallRatingStatisticsLoadLoad(type);
    },
    'overallRatingStatistics.x': {
      handler (val) {
        this.chart.overallRatingStatisticsChart.setOption({
          grid: {
            top: 20,
            left: 30,
            right: 30,
            bottom: 20,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            formatter (item) {
              let o = item[0];
              return o.data.value + ' 分<br/>';
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: val.length ? val : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            axisLine: {
              lineStyle: {
                color: 'black'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: 'black'
              }
            }
          },
          series: [
            {
              name: '发货量',
              type: 'line',
              data: this.overallRatingStatistics.y
            }
          ]
        });
      },
      deep: true
    }
  },
  methods: {
    searchMemberUsers (val) {
      let filters = isEmpty(val) ? 'logicStatus=111002002;status=111002001' : 'logicStatus=111002002;status=111002001;realName?' + val + ' g1';
      getMemberUsers({
        token: this.token,
        filters: filters,
        sorts: '+createDate',
        size: '15',
        page: '1'
      }).then((res) => {
        this.memberUsers = res.data.detailModelList;
      });
    },
    /**
       * 查看订单
       */
    orderSelectDialog (val) {
      this.orderSelect = true;
      this.orderSelectForm = val;
    },
    searchFormClick () {
      let filters = '';
      if (!isEmpty(this.searchDate)) {
        // filters += 'GT_evaluationTime=' + this.searchDate[0].toJSON().substring(0, 10) + ';';
        // filters += 'LT_evaluationTime=' + this.searchDate[1].toJSON().substring(0, 10) + ';';
        filters += 'GT_evaluationTime=' + (this.searchDate[0]).Format('yyyy-MM-dd') + ' 00:00:00' + ';';
        filters += 'LT_evaluationTime=' + (this.searchDate[1]).Format('yyyy-MM-dd') + ' 23:59:59' + ';';
      }
      if (!isEmpty(this.searchForm.overallEvaluation)) {
        filters += 'EQ_overallEvaluation=' + this.searchForm.overallEvaluation + ';';
      }
      if (!isEmpty(this.searchForm.orderNumber)) {
        filters += 'LIKE_order.orderNumber=' + this.searchForm.orderNumber + ';';
      }
      if (!isEmpty(this.searchForm.memberUserId)) {
        filters += 'LIKE_order.memberUserId=' + this.searchForm.memberUserId + ';';
      }
      if (!isEmpty(this.searchForm.shipmentsContactPhone)) {
        filters += 'LIKE_order.shipmentsContactPhone=' + this.searchForm.shipmentsContactPhone + ';';
      }
      if (this.searchForm.checked) {
        filters += 'ISNOTNULL_evaluationDescription;';
      }
      this.param.filters = filters;
      getOrderEvaluationManages(this.param).then((res) => {
        if (res.data.successFlg) {
          this.evaluationData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        } else {
          this.evaluationData = [];
        }
      }).catch(function (error) {
        this.$message.error('更新失败:' + error);
      });
    },
    reset () {
      this.searchDate = [];
      resetObjNull(this.searchForm);
    },
    load () {
      this.chart.overallRatingStatisticsChart = echarts.init(document.getElementById('a1'), {width: 'auto'});
    },
    init () {
      getOrderEvaluationManages(this.param).then((res) => {
        if (res.data.successFlg) {
          this.evaluationData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
      });
    },
    totalInit () {
      getTotalInfo().then((res) => {
        if (res.data.successFlg) {
          this.totalInfo = res.data.obj;
        }
      });
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchFormClick();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchFormClick();
    },
    overallRatingStatisticsLoadLoad (type) {
      overallRatingStatistics(type).then(res => {
        let x = [];
        let y = [];
        if (res.data.successFlg) {
          res.data.detailModelList.forEach(item => {
            x.push(item.dt);
            y.push({value: item.overall_rating});
          });
          this.overallRatingStatistics.x = x;
          this.overallRatingStatistics.y = y;
        }
      });
    }
  },
  // 初始化数据
  mounted () {
    this.init();
    this.load();
    this.totalInit();
    this.searchMemberUsers();
    this.$store.commit('initDict');
    this.overallRatingStatisticsLoadLoad(this.orderEvaluationType);
  }
};
</script>
